<template>
	<view class="content-box">
		<view class="fixed">
			<view class="content1">
				<Head></Head>
			</view>
			<view class="content2">
				<Banner></Banner>
			</view>
		</view>
		<view class="main-center">
			<h1 style="margin-bottom: 50px;margin-top: 50px">网站地图</h1>
			<div class="map-box">
			  <div>
			    <span @click="herfto('index')" class="shouyespan">首页 Homepage</span>
			    <p style="margin-top: 40px">私立中学School & Colleges</p>
			    <ul>
			      <li>
			        <span @click="herfto('dvb')">牛津德欧中学 DVB</span>
			      </li>
			      <li>
			        <span @click="herfto('oic')">牛津国际高中 OIC</span>
			      </li>
			      <li>
			        <span @click="herfto('oxsfc')">牛津学院 OxSFC</span>
			      </li>
			    </ul>
			    <p style="margin-top: 40px">关于我们 About Us </p>
			    <ul>
			      <li>
			        <span @click="herfto('corevalue')">核心价值观 Our Core Values </span>
			      </li>
			      <li>
			        <span @click="herfto('policy')">隐私条款 Privacy Policy </span>
			      </li>
			    </ul>
			  </div>
			  <div class="dierhang">
			    <p>合作大学 University Partnerships </p>
			    <ul>
			      <li>
			        <span @click="herfto('bangor')">班戈大学 Bangor University </span>
			      </li>
			      <li>
			        <span @click="herfto('dundee')">邓迪大学 The University of Dundee </span>
			      </li>
			      <li>
			        <span @click="herfto('montfort')">德蒙福特大学 De Montfort University </span>
			      </li>
			      <li>
			        <span @click="herfto('greenwich')">格林威治大学 University Of Greenwich </span>
			      </li>
			      <li>
			        <span @click="herfto('Jacobs')">雅各布大学 Jacobs University </span>
			      </li>
			      <li>
			        <span @click="herfto('application')">申请 University Partnerships Application</span>
			      </li>
			    </ul>
			    <p style="margin-top: 40px">代理服务 For Agents </p>
			    <ul>
			      <li>
			        <span @click="herfto('agents')">合作介绍 Partner With Us </span>
			      </li>
			      <li>
			        <span @click="herfto('download')">资料下载 Brochure DownloadsT</span>
			      </li>
			    </ul>
			  </div>
			</div>
		</view>
		<Foot></Foot>
	</view>
</template>

<script>
	import Head from '@/components/head.vue'
	import Banner from '@/components/banner.vue'
	import Foot from '@/components/foot.vue'
	export default {
		components: {
			Head,
			Banner,
			Foot
		},
		data() {
			return {
				
			}
		},
		methods: {
			herfto(name) {
			  // this.$router.push(`/${name}`)
				uni.navigateTo({
					url:'../'+name+'/'+name
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.main-center{
  padding-top: 150px;
  padding-bottom: 200px;
  max-width: 1200px;
  margin: 0 auto;
}
.map-box{
  display: flex;
  flex-direction: row;
  /*justify-content: space-between;*/
  div:nth-of-type(1){
    margin-right: 150px;
  }
  div{
    /*flex: 1;*/
    display: flex;
    flex-direction: column;
  }
  p{
    font-size: 19px;
    line-height: 0;
    margin-bottom: 30px;
  }
  span{
    transition: all .3s;
    cursor: pointer;
    font-size: 19px;
  }
	ul,li{
		list-style: none;
	}
  li{
    margin-bottom: 15px;
    span{
      padding-left: 30px;
      position: relative;
      font-size: 17px;
      /*display: block;*/
    }
    span:before{
      content: '';
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #303030;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  span:hover{
    color: #409eff;
  }
  .shouyespan{
    padding-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
  }
}
.map{
  display: flex;
  flex-direction: column;

  .map-main{
cursor: pointer;
    display: flex;
    flex-direction: column;
    div:nth-of-type(1){
      display: flex;
      flex-direction: row;
    }
    div{
      span{
        transition: all .3s;
      }
      cursor: pointer;
      display: flex;
      flex-direction: row;
      padding-left: 38px;
      align-items: center;
      margin-bottom: 15px;
    }
    div:hover{
      span{
        color: #409eff;
      }
    }
    .pic{
      display: block;
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }
  }
}
  .map-main1{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    span{
      transition: all 0.3s;
    }
    .pic{
      display: block;
      width: 32px;
      height: 32px;
      margin-right: 10px;
    }
    margin-bottom: 20px;
  }
.map-main1:hover{
  span{
    color: #409eff;
  }
}
@media screen and (max-width: 750px){
				.map-box{
	display: flex;
	flex-direction: column;
}

.main-center{
  padding-top: 50px;
  padding-bottom: 200px;
  max-width: 1200px;
  margin: 0 auto;
}
ul{
	padding-left: 10px;
	width: 100% !important;
}
li{
	width: 100%;
	span{
		font-size: 13px !important;
	}
}
div:nth-of-type(1){
    margin-right: 0px !important;
  }
			}
.map-box{
	padding: 0 15px;
}
h1{
	padding: 0 15px;
}
.dierhang{
	margin-top: 40px;
}
span{
	// font-size: 14px !important;
}
</style>
